<template>
  <div class="container">
    <div v-show="!showDetails">
      <div style="text-align: left;">
        <!-- 搜索区 -->
        <table>
          <tr>
            <th>
              <span>学期：</span>
              <el-button
                @click="openSemesterList = true"
                type="text"
                style="width: 250px; text-align: left;"
              >
                <span v-if="semesterSelect">{{ semesterSelect.name }}</span>
                <span v-else>未选择</span>
              </el-button>
            </th>
            <th>
              <span>课程：</span>
              <el-button
                @click="openCourseList = true"
                type="text"
                style="width: 250px; text-align: left;"
              >
                <span v-if="courseSelect">{{ courseSelect.name }}</span>
                <span v-else>未选择</span>
              </el-button>
            </th>
            <th></th>
          </tr>
          <tr>
            <th>
              <span>班级：</span>
              <el-button
                @click="openInstructionClassList = true"
                type="text"
                style="width: 250px; text-align: left;"
              >
                <span v-if="instructionClassSelect">{{
                  instructionClassSelect.name
                }}</span>
                <span v-else>未选择</span>
              </el-button>
            </th>
            <th>
              <span>教师：</span>
              <el-button
                @click="openTeacherList = true"
                type="text"
                style="width: 250px; text-align: left;"
              >
                <span v-if="teacherSelect">{{ teacherSelect.name }}</span>
                <span v-else>未选择</span>
              </el-button>
            </th>
            <th>
              <el-button type="primary" icon="el-icon-search" @click=""
                >搜索</el-button
              >
            </th>
          </tr>
        </table>

        <!-- 学期筛选 -->
        <el-dialog title="选择学期" :visible.sync="openSemesterList">
          <el-input placeholder="请输入关键字" v-model="semesterKeyword">
            <template slot="prepend"
              >学期名</template
            >
            <el-button
              slot="append"
              icon="el-icon-search"
              @click=""
            ></el-button>
          </el-input>
          <br />
          <br />
          <el-radio-group v-model="semesterSelect">
            <el-radio
              v-for="(semester, index) in semesterList"
              :key="'semester' + index"
              :label="semester"
              >{{ semester.name }}</el-radio
            >
          </el-radio-group>
          <div slot="footer" class="dialog-footer">
            <el-button @click="semesterSelect = ''">清 空</el-button>
            <el-button type="primary" @click="openSemesterList = false"
              >确 定</el-button
            >
          </div>
        </el-dialog>
        <!-- 课程筛选 -->
        <el-dialog title="选择课程" :visible.sync="openCourseList">
          <el-input placeholder="请输入关键字" v-model="courseKeyword">
            <template slot="prepend"
              >课程名</template
            >
            <el-button
              slot="append"
              icon="el-icon-search"
              @click=""
            ></el-button>
          </el-input>
          <br />
          <br />
          <el-radio-group v-model="courseSelect">
            <el-radio
              v-for="(course, index) in courseList"
              :key="'course' + index"
              :label="course"
              >{{ course.name }}</el-radio
            >
          </el-radio-group>
          <div slot="footer" class="dialog-footer">
            <el-button @click="courseSelect = ''">清 空</el-button>
            <el-button type="primary" @click="openCourseList = false"
              >确 定</el-button
            >
          </div>
        </el-dialog>
        <!-- 班级筛选 -->
        <el-dialog title="选择班级" :visible.sync="openInstructionClassList">
          <el-input
            placeholder="请输入关键字"
            v-model="instructionClassKeyword"
          >
            <template slot="prepend"
              >班级名</template
            >
            <el-button
              slot="append"
              icon="el-icon-search"
              @click=""
            ></el-button>
          </el-input>
          <br />
          <br />
          <el-radio-group v-model="instructionClassSelect">
            <el-radio
              v-for="(instructionClass, index) in instructionClassList"
              :key="'instructionClass' + index"
              :label="instructionClass"
              >{{ instructionClass.name }}</el-radio
            >
          </el-radio-group>
          <div slot="footer" class="dialog-footer">
            <el-button @click="instructionClassSelect = ''">清 空</el-button>
            <el-button type="primary" @click="openInstructionClassList = false"
              >确 定</el-button
            >
          </div>
        </el-dialog>
        <!-- 教师筛选 -->
        <el-dialog title="选择教师" :visible.sync="openTeacherList">
          <el-input placeholder="请输入关键字" v-model="teacherKeyword">
            <template slot="prepend"
              >教师名</template
            >
            <el-button
              slot="append"
              icon="el-icon-search"
              @click=""
            ></el-button>
          </el-input>
          <br />
          <br />
          <el-radio-group v-model="teacherSelect">
            <el-radio
              v-for="(teacher, index) in teacherList"
              :key="'teacher' + index"
              :label="teacher"
              >{{ teacher.name }}</el-radio
            >
          </el-radio-group>
          <div slot="footer" class="dialog-footer">
            <el-button @click="teacherSelect = ''">清 空</el-button>
            <el-button type="primary" @click="openTeacherList = false"
              >确 定</el-button
            >
          </div>
        </el-dialog>
      </div>
      <hr />
      <!-- 授课意向列表 -->
      <div class="table">
        <el-table
          :data="
            teachingIntentionList.slice(
              (currentPage - 1) * pagesize,
              currentPage * pagesize
            )
          "
          stripe
          border
          @row-click="rowClick"
        >
          <el-table-column prop="semesterName" label="学期"></el-table-column>
          <el-table-column prop="courseName" label="课程"></el-table-column>
          <el-table-column
            prop="instructionClassName"
            label="班级"
          ></el-table-column>
          <el-table-column prop="teacherName" label="教师"></el-table-column>
        </el-table>
        <br />
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[5, 10, 20, 50]"
          :page-size="pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="tableTotal"
          style="margin-left: 30%;"
        ></el-pagination>
      </div>
    </div>
    <!-- 详情 -->
    <div v-show="showDetails">
      <intentionDetails
        :intentionDetails="intentionDetails"
        @closeDetails="closeDetails"
      />
    </div>
  </div>
</template>

<script>
import intentionDetails from "@/views/education-instructionalMatters/teaching-intention/details";
import { getAllSemester } from "@/api/semester";
import { getAllTeachingIntention } from "@/api/teachingIntention";
import { getAllTeacher } from "@/api/teacher";
import { getAllCourse } from "@/api/course";
import { getAllInstructionClass } from "@/api/instructionClass";

export default {
  name: "teachingIntention",
  data() {
    return {
      //分页
      tableTotal: 6,
      currentPage: 1,
      pagesize: 10,
      showDetails: false, //显示详情页面
      intentionDetails: {}, //某一行的详情信息
      teachingIntentionList: [], //教师授课意向表

      teacherList: [], //教师列表
      teacherSelect: "", //教师筛选关键字
      openTeacherList: false, //教师筛选框是否开启
      teacherKeyword: "", //教师筛选关键字

      instructionClassList: [], //班级列表
      instructionClassSelect: "", //班级筛选关键字
      openInstructionClassList: false, //班级筛选框是否开启
      instructionClassKeyword: "", //班级筛选关键字

      courseList: [], //课程列表
      courseSelect: "", //课程筛选关键字
      openCourseList: false, //课程筛选框是否开启
      courseKeyword: "", //课程筛选关键字

      semesterList: [], //学期列表
      semesterSelect: "", //学期选择
      openSemesterList: false, //学期筛选框是否开启
      semesterKeyword: "" //学期筛选关键字
    };
  },
  components: {
    intentionDetails
  },
  created() {
    // 获取学期列表
    this.getAllSemester();
    //获取教师列表
    this.getAllTeacher();
    //获取课程列表
    this.getAllCourse();
    //获取授课班级列表
    this.getAllInstructionClass();
    //获取教师授课意向表
    this.getTeachingIntentionList();
  },
  methods: {
    //获取教师授课意向表
    getTeachingIntentionList() {
      getAllTeachingIntention().then(res => {
        this.tableTotal = res.data.teachingIntentionList.length;
        this.teachingIntentionList = res.data.teachingIntentionList;
      });
    },

    //获取教师列表
    getAllTeacher() {
      getAllTeacher().then(res => {
        this.teacherList = res.data.teacherList;
      });
    },

    //获取课程列表
    getAllCourse() {
      getAllCourse().then(res => {
        this.courseList = res.data.courseList;
      });
    },

    //获取授课班级列表
    getAllInstructionClass() {
      getAllInstructionClass().then(res => {
        this.instructionClassList = res.data.instructionClassList;
      });
    },

    // 获取学期列表
    getAllSemester() {
      getAllSemester().then(res => {
        this.tableTotal = res.data.semesterList.length;
        this.semesterList = res.data.semesterList;
      });
    },

    //点击教师授课意向表中的某一列,显示教师授课意向详情
    rowClick(val) {
      this.intentionDetails = val;
      this.showDetails = true;
    },

    //详情组件传过来的数据
    closeDetails(val) {
      this.showDetails = val;
    },

    // 换页
    handleSizeChange: function(size) {
      this.pagesize = size;
    },
    handleCurrentChange: function(currentPage) {
      this.currentPage = currentPage;
    }
  }
};
</script>

<style scoped>
.container {
  width: 80%;
  max-width: 100%;
  margin: 20px auto;
}
span {
  font-weight: 500;
}
th {
  text-align: left;
  width: 500px;
}
</style>
